<template>
<el-header class="nav-header">
    <span class="header-left">
        <img class="logo" src="../../assets/images/kios.png" alt="">
    </span>
    <span class="header-mid">
        <nav-menu></nav-menu>
    </span>
    <span class="header-right">
        <el-button @click="handleTo">我的钱包</el-button>
        <el-dropdown placement="bottom" @command="handleLanguage">
            <span class="language-btn">
                <img class="language-img" :src="require(`../../assets/images/${language}.png`)" alt="">
                {{language === 'en' ? '英文' : '中文'}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="my-dropitem" command="zh">
                    <img class="language-img" src="../../assets/images/zh.png" alt="">
                    中文
                </el-dropdown-item>
                <el-dropdown-item class="my-dropitem" command="en">
                    <img class="language-img" src="../../assets/images/en.png" alt="">
                    英文
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-avatar size="medium" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
        <el-dropdown @command="handleClickDropdown">
            <span class="el-dropdown-link">
                {{username || 'admin'}}
                <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="handleSet">
                    <i class="el-icon-setting"></i>
                    设置
                </el-dropdown-item>
                <el-dropdown-item command="handleUserInfo">
                    <i class="el-icon-user"></i>
                    个人中心
                </el-dropdown-item>
                <el-dropdown-item command="handleSignOut" divided>
                    <i class="el-icon-switch-button"></i>
                    退出登录
                </el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown> -->
    </span>
</el-header>
</template>

<script>
import NavMenu from '@/components/navSide'
export default {
    name: 'NavHeader',
    props: {
    },
    components: { NavMenu },
    data () {
        return {
            username: null,
            language: 'zh'
        }
    },
    mounted () {
        this.init()
    },
    methods: {
        handleTo () {
            window.open('https://shasta.tronscan.org/#/')
        },
        init () {
            const userInfo = localStorage.getItem('userInfo')
            if (userInfo) {
                const { username } = JSON.parse(userInfo)
                this.username = username
            }
        },
        handleLanguage (val) {
            if (this.language === val) {
                return
            }
            this.language = val
        },
        handleUserInfo () {},
        handleSet () {},
        handleSignOut () {
            localStorage.clear()
            this.$router.push('/login')
        },
        handleClickDropdown (val) {
            this[val]()
        }
    }
}
</script>

<style lang="less">
.language-img {
        width: 32px;
        height: 32px;
        margin-right: 4px;
    }
    .my-dropitem {
        text-align: left;
        display: flex;
        align-items: center;
    }
.nav-header {
    height: 48px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
    .header-right, .header-left {
        display: flex;
        align-items: center;
    }
    .logo {
       height: 30px;
    }
    .language-btn {
        margin: 0 20px;
        display: flex;
        align-items: center;
    }
}
</style>
